import React, { useState } from 'react';
import './index.scss';
import { CaretRightOutlined, DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons';

interface TreeData {
  key: string;
  title: string;
  children?: TreeData[];
}

interface Props {
  treeData: TreeData[];
  onUpdate?: (value: TreeData) => void;
  onEdit?: (value: TreeData) => void;
  onDelete?: (value: TreeData) => void;
  level?: number;
}

type OnClickType = 'update' | 'edit' | 'delete';

interface TreeNodeProps {
  item: TreeData;
  level: number;
  onUpdate?: (value: TreeData) => void;
  onEdit?: (value: TreeData) => void;
  onDelete?: (value: TreeData) => void;
}

const Tree = ({ treeData, level = 0, onUpdate, onEdit, onDelete }: Props) => {
  return (
    <>
      {treeData.map((item) => (
        <TreeNode
          key={item.key}
          item={item}
          level={level}
          onUpdate={onUpdate}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      ))}
    </>
  );
};

const TreeNode = ({ item, level, onUpdate, onEdit, onDelete }: TreeNodeProps) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const hasChildren = item.children && item.children.length > 0;

  const handleUpdate = (
    e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
    value: TreeData,
    type: OnClickType = 'update',
  ) => {
    e.stopPropagation();
    if (type === 'update') {
      onUpdate && onUpdate(value);
    } else if (type === 'edit') {
      onEdit && onEdit(value);
    } else if (type === 'delete') {
      onDelete && onDelete(value);
    }
  };

  return (
    <div>
      <div
        className="select group flex cursor-pointer select-none items-center justify-between py-[14px] pl-2 pr-[10px] text-sm text-[#1D1D1D]"
        onClick={() => hasChildren && setIsExpanded(!isExpanded)}
      >
        <div
          className="flex items-center"
          style={{
            paddingLeft: level !== 0 ? '30px' : '0px',
          }}
        >
          <div className="h-5 w-5">
            {hasChildren && <CaretRightOutlined rotate={isExpanded ? 90 : 0} />}
          </div>
          <div className="pl-1 font-medium">{item.title}</div>
        </div>

        {level === 0 ? (
          <div className="flex items-center" onClick={(e) => handleUpdate(e, item)}>
            <PlusOutlined />
            <div className="pl-1 text-xs">添加组织</div>
          </div>
        ) : (
          <div className="hidden items-center group-hover:flex">
            <PlusOutlined onClick={(e) => handleUpdate(e, item)} />
            <FormOutlined className="mx-3" onClick={(e) => handleUpdate(e, item, 'edit')} />
            <DeleteOutlined onClick={(e) => handleUpdate(e, item, 'delete')} />
          </div>
        )}
      </div>

      {isExpanded && hasChildren && (
        <Tree
          treeData={item.children!}
          level={level + 1}
          onUpdate={onUpdate}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      )}
    </div>
  );
};

export default Tree;
